<script setup>
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import OrderStep from '@/components/OrderStep/index.vue';
import DescriptionTable from '@/components/DescriptionTable/index.vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import { getPcbInfo } from '@/server/api/biz.js';
import { downloadFile } from '@/utils/common.js';
import { queryOmsProductionMaterialBatchList } from '@/server/api/biz.js';
const route = useRoute();
const router = useRouter();

const orderProgressList = computed(() => [
  {
    name: t('mall.place_order'),
  },
  {
    name: t('mall.match'),
  },
  {
    name: t('mall.payment'),
  },
  {
    name: t('mall.production'),
  },
  {
    name: t('mall.shipment'),
  },
  {
    name: t('mall.receipt'),
  },
  {
    name: t('mall.complete'),
  },
]);
//
const orderDetail = ref({});
// 快递信息
const deliveryInfo = reactive({});
const batchList = ref([]); // 生产批次列表

onMounted(() => {
  const { id } = route.query;
  if (id) {
    getPcbOrderInfo(id);
    getBatchOptionList();
  }
});

/**
 * 获取快订单详情信息
 */
function getPcbOrderInfo(id) {
  getPcbInfo(id).then((res) => {
    if (res.code === 200) {
      orderDetail.value = res.data;
      if (res.data.crmPcbaPcbOrder && res.data.crmPcbaPcbOrder.serviceDetail) {
        orderDetail.value.crmPcbaPcbOrder.basicService =
          res.data.crmPcbaPcbOrder.serviceDetail['1'] || []; // 基础服务
        orderDetail.value.crmPcbaPcbOrder.craftService =
          res.data.crmPcbaPcbOrder.serviceDetail['2'] || []; // 工艺服务
        orderDetail.value.crmPcbaPcbOrder.customizedService =
          res.data.crmPcbaPcbOrder.serviceDetail['3'] || []; // 定制服务
      }

      if (res.data.crmPcbaSmtOrder && res.data.crmPcbaSmtOrder.serviceDetail) {
        orderDetail.value.crmPcbaSmtOrder.basicService =
          res.data.crmPcbaSmtOrder.serviceDetail['1'] || []; // 基础服务
        orderDetail.value.crmPcbaSmtOrder.craftService =
          res.data.crmPcbaSmtOrder.serviceDetail['2'] || []; // 工艺服务
        orderDetail.value.crmPcbaSmtOrder.customizedService =
          res.data.crmPcbaSmtOrder.serviceDetail['3'] || []; // 定制服务
      }

      // 快递信息
      const { expressAddress, expressName, expressPhone } = res.data.crmPcbaOrderExpress;
      deliveryInfo.address = expressAddress.replace(/\//g, '');
      deliveryInfo.expressName = expressName;
      deliveryInfo.expressPhone = expressPhone;
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/**
 *  文件下载
 */
function handleDownload(url) {
  downloadFile(url);
}

/**
 * 获取物料生产批次信息
 */
const getBatchOptionList = () => {
  queryOmsProductionMaterialBatchList().then((res) => {
    if (res.code === 200) {
      batchList.value = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 格式化批次
const formatBatch = (value) => {
  const batchItem = batchList.value.find((item) => item.batchValue === value);
  if (!batchItem) {
    return t('mall.unlimited');
  }
  return batchItem.batchName;
};

const patchList = [
  {
    id: 1,
    name: t('home.fullSticker'),
  },
  {
    id: 2,
    name: t('home.topLevel'),
  },
  {
    id: 3,
    name: t('home.groundFloor'),
  },
];

const returnStep = () => {
  const { tabs } = route.query;

  if (tabs === '0') {
    router.push({ path: '/order', query: { type: 0, tabs: 0 } });
  } else if (tabs === '1') {
    router.push({ path: '/order', query: { type: 0, tabs: 1 } });
  }
  router.back();
};
</script>
<template>
  <!-- 头部 -->
  <smt-header></smt-header>
  <div class="wrapper">
    <div class="settlement container">
      <el-breadcrumb :separator-icon="ArrowRight" class="f-28">
        <el-breadcrumb-item :to="{ path: '/' }">{{ $t('menu.home') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('mall.order') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('mall.order_details') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="step-wrap">
        <OrderStep :stepList="orderProgressList" :active="orderDetail.orderProgress" />
      </div>
      <!-- 基本信息 -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('smt.generalInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('smt.orderNo')}:`">{{
              orderDetail.serial
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.order_time')}:`">{{
              orderDetail.createTime || '--'
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.payment_time')}:`">{{
              orderDetail.updateTime || '--'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- PCB信息  -->
      <div class="block-container" v-if="orderDetail?.crmPcbaPcbOrder">
        <div class="title-section">
          <p class="title">{{ $t('smt.PCBInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item
              :label="`${$t('mall.material_category')}:`"
              v-if="orderDetail?.crmPcbaPcbOrder?.productName"
              >{{ orderDetail?.crmPcbaPcbOrder?.productName }}</el-descriptions-item
            >
            <el-descriptions-item
              :label="`${$t('pcb.BoardSize')}:`"
              v-if="orderDetail?.crmPcbaPcbOrder?.pcbWidth"
              >{{
                `${orderDetail.crmPcbaPcbOrder.pcbWidth} * ${orderDetail.crmPcbaPcbOrder.pcbWidth}`
              }}cm</el-descriptions-item
            >
            <el-descriptions-item
              :label="`${$t('pcb.Platelayer')}:`"
              v-if="orderDetail?.crmPcbaPcbOrder?.pcbLayer"
              >{{ orderDetail.crmPcbaPcbOrder.pcbLayer }}</el-descriptions-item
            >
            <el-descriptions-item
              :label="`${$t('home.boardSum')}:`"
              v-if="orderDetail?.crmPcbaPcbOrder?.orderPcbNumber"
              >{{ orderDetail.crmPcbaPcbOrder.orderPcbNumber }}Pcs</el-descriptions-item
            >
          </el-descriptions>
        </div>
      </div>
      <!-- 工艺信息 -->
      <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftsDetail">
        <description-table
          :header="$t('mall.process_information')"
          :propsConfig="{
            label: 'craftsName',
            value: 'craftsDetailName',
          }"
          :data="orderDetail.crmPcbaPcbOrder?.craftsDetail"
        />
      </div>
      <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftsDetail">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder?.craftsDetail"
              :key="index"
              :label="item.craftsName"
              >{{ item.craftsDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

      <!-- 基础服务 -->
      <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.basicService">
        <description-table
          :header="$t('smt.Basicservices')"
          :propsConfig="{
            label: 'serviceName',
            value: 'serviceDetailName',
          }"
          :data="orderDetail.crmPcbaPcbOrder?.basicService"
        />
      </div>
      <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.basicService">
          <div class="description-head">
            <p class="description-title">基础服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder?.basicService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

      <!-- 工艺服务 -->
      <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftService">
        <description-table
          :header="$t('mall.process_service')"
          :propsConfig="{
            label: 'serviceName',
            value: 'serviceDetailName',
          }"
          :data="orderDetail.crmPcbaPcbOrder?.craftService"
        />
      </div>
      <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder.craftService">
          <div class="description-head">
            <p class="description-title"> {{$t('mall.process_service')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder.craftService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

      <!-- 定制服务 -->
      <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.customizedService">
        <description-table
          :header="$t('smt.Customizedservices')"
          :propsConfig="{
            label: 'serviceName',
            value: 'serviceDetailName',
          }"
          :data="orderDetail.crmPcbaPcbOrder?.customizedService"
        />
      </div>
      <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder.customizedService">
          <div class="description-head">
            <p class="description-title">定制服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder.customizedService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div>
      </div> -->

      <!-- SMT信息  -->
      <div class="block-container" v-if="orderDetail.orderCategory === 2">
        <div class="title-section">
          <p class="title">{{ $t('smt.SMTInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('mall.chipLayer')}:`">{{
              patchList[0].name
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.smt_quantity')}:`"
              >{{ orderDetail.crmPcbaSmtOrder.smtNumber }} PCS</el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mall.accept_alternative_components')}:`">
              {{
                orderDetail.crmPcbaSmtOrder.isUseAlternative === 1
                  ? $t('mall.accept')
                  : $t('mall.do_not_accept')
              }}
            </el-descriptions-item>
            <el-descriptions-item :label="`${t('mall.accept_the_batch')}:`">
              {{ formatBatch(orderDetail.crmPcbaSmtOrder.batchYearLimit) }}
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('smt.BOMFile')}:`">
              <el-link
                type="primary"
                @click="handleDownload(orderDetail?.crmPcbaSmtOrder.bomVO?.filePath)"
                >{{ orderDetail?.crmPcbaSmtOrder?.bomVO?.fileName }}</el-link
              >
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('smt.Coordinatefile')}:`">
              {{ orderDetail.or }}
              <el-link
                type="primary"
                @click="handleDownload(orderDetail?.crmPcbaSmtOrder?.coordinateFileVO?.filePath)"
                >{{ orderDetail?.crmPcbaSmtOrder?.coordinateFileVO?.fileName }}</el-link
              >
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 工艺信息 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftsDetail">
          <description-table
            :header="$t('mall.process_information')"
            :data="orderDetail.crmPcbaSmtOrder?.craftsDetail"
            :propsConfig="{
              label: 'craftsName',
              value: 'craftsDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftsDetail">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder?.craftsDetail"
              :key="index"
              :label="item.craftsName"
              >{{ item.craftsDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 基础服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.basicService">
          <description-table
            :header="$t('smt.Basicservices')"
            :data="orderDetail.crmPcbaSmtOrder?.basicService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.basicService">
          <div class="description-head">
            <p class="description-title">基础服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder?.basicService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 工艺服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftService">
          <description-table
            :header="$t('mall.smt_process_service_fee')"
            :data="orderDetail.crmPcbaSmtOrder?.craftService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder.craftService">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_service')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder.craftService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 定制服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.customizedService">
          <description-table
            :header="$t('smt.Customizedservices')"
            :data="orderDetail.crmPcbaSmtOrder?.customizedService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder.customizedService">
          <div class="description-head">
            <p class="description-title">定制服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder.customizedService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->
      </div>

      <!-- 收货信息  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.shipping_information') }}</p>
        </div>
        <div class="content-wrap">
          <div class="address-container">
            <div class="address-info">
              <p class="district">{{ $t('mall.recipient') }}: {{ deliveryInfo.expressName }}</p>
              <p class="address">{{ $t('mall.shipping_address') }}: {{ deliveryInfo.address }}</p>
              <p class="contacts">
                {{ $t('mall.contact_phone') }}: {{ deliveryInfo.expressPhone }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 快递方式  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('smt.Expressway') }}</p>
        </div>
        <div class="content-wrap">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('smt.Expressway')}:`">{{
              $t('mall.cash_on_delivery')
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <!-- 付款方式  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.payment_method') }}</p>
        </div>
        <div class="content-wrap">
          <el-form-item :label="`${$t('mall.payment_method')}:`"> PayPal </el-form-item>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="order-table-wrap">
        <div class="table-head">
          <div class="head-item">{{ $t('mall.delivery_and_shipping') }}</div>
          <div class="head-item">{{ $t('mall.price_and_costs') }}</div>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="`${$t('mall.delivery_time')}:`"
            ><span class="content">
              <span v-if="orderDetail.deliveryDay" class="content"
                >{{ `${orderDetail.deliveryDay} - ${orderDetail.deliveryDay + 3}`
                }}{{ $t('mall.days') }}</span
              >
            </span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.pcb_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.symbol || '$'
              }}{{
                orderDetail.pcbAmount > 0
                  ? Math.round((orderDetail.pcbAmount / orderDetail.exchangeRmbRate) * 100) / 100
                  : 0
              }}</span
            ></el-descriptions-item
          >

          <el-descriptions-item :label="`${$t('mall.express_delivery')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.smt_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.symbol || '$'
              }}{{
                orderDetail.smtAmount > 0
                  ? Math.round((orderDetail.smtAmount / orderDetail.exchangeRmbRate) * 100) / 100
                  : 0
              }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.shipping_time')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.logistics_fee')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_costs')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item></el-descriptions-item>
          <el-descriptions-item :label="`${$t('mall.tax_fee')}:`"
            ><span class="content amount">
              {{ orderDetail.symbol || '$'
              }}{{ Number(orderDetail.taxAmount).toFixed(2) || 0 }}</span
            ></el-descriptions-item
          >
        </el-descriptions>
        <div class="table-footer">
          <p>
            <label class="title">{{ $t('mall.estimated_cost') }}</label
            ><span class="amount"
              >{{ orderDetail.symbol || '$'
              }}{{ Number(orderDetail.payCurrencyTaxAmount).toFixed(2) }}</span
            >
          </p>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="btn-wrap">
        <el-button plain @click="returnStep">{{ $t('mall.previous_step') }}</el-button>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <smt-footer></smt-footer>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 12px 0 72px;
  background: #f5f5f5;
  .settlement {
    padding: 28px 20px;
    border-radius: 8px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .step-wrap {
      display: flex;
      justify-content: center;
      padding: 20px 0;
    }

    .page-title {
      padding: 0 24px;
      color: var(--mall-text-color-primary);
      font-size: 20px;
      font-weight: 700;
    }
    .block-container {
      padding-bottom: 20px;
      .title-section {
        display: flex;
        align-items: center;
        padding: 0 30px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
        background: #f5f5f5;
        color: #383838;
        font-size: 14px;
        font-weight: 400;
      }

      .content-wrap {
        padding: 20px 30px 8px;
        &.border {
          border-bottom: 1px solid #d9d9d9;
        }
      }

      .description-wrap {
        padding-top: 16px;
        .description-head {
          border: 1px solid #d9d9d9;
          padding: 0 20px;
          border-bottom: none;
          height: 35px;
          line-height: 35px;
          background: #fafafa;
          .description-title {
            color: #383838;
            font-size: 14px;
          }
        }
      }

      .address-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 384px;
        .address-info {
          color: #686868;
          font-size: 12px;
          font-weight: 400;
          .default-tag {
            margin-left: 14px;
          }
          .address {
            padding: 10px 0;
            color: #383838;
            font-size: 14px;
          }
          .contacts {
            color: #888888;
          }
        }
      }
    }

    .order-table-wrap {
      .table-head {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-bottom: none;
        background: #f5f5f5;
        .head-item {
          flex: 1;
          text-align: center;
          &:first-child {
            position: relative;
            &:after {
              content: '';
              position: absolute;
              right: 3px;
              height: 40px;
              width: 1px;
              background: #d9d9d9;
            }
          }
        }
      }

      .table-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-top: none;
        font-size: 16px;
        font-weight: 700;
        font-family: 'SourceHanSansCN';
        .title {
          color: #000000;
          padding-right: 5px;
        }
      }

      ::v-deep .el-descriptions__body {
        --el-descriptions-item-bordered-label-background: transparent !important;
      }
    }

    .amount {
      color: #ff0000;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      padding: 30px;
    }
  }
  ::v-deep .el-descriptions__body {
    --el-descriptions-table-border: 1px solid #d9d9d9 !important;
    --el-descriptions-item-bordered-label-background: #fafafa;
  }
}
</style>
